<template>
	<view :style="'color:'+shallowColor" class="index-index">
		<view class="content-index">
			<headers @custom-event="customevent"></headers>
			<el-container class="index-top">
				<asides :asideW="asideW" :aside="aside"></asides>
				<scroll-view :lower-threshold="clientHeight" ref="backTop" :scroll-top="scrollTop" scroll-y
					class="infinite-list" @scrolltolower="loadMore" @scroll="handleScroll"
					style="overflow:auto;padding: 10px;height:calc(100vh - 65px);">
					<view class="">
						<view
							style=";margin-top: 10px;display: flex;justify-content: space-between;align-items: center;">
							<view
								:style="'font-weight: bolder;font-size: 20px;padding: 10px;border-radius: 5px;color: '+deepColor">
								推荐
							</view>
							<view style="display: flex;justify-content: flex-end;align-items: center;font-size: 14px;">
								<view
									:style="'margin-left: 10px;border-radius: 10px;padding: 2px 5px;border: 1px solid '+lightColor"
									@click="more = !more">
									所有人<i class="el-icon-arrow-right"></i>
								</view>
								<view
									:style="'margin-left: 10px;border-radius: 10px;padding: 2px 5px;border: 1px solid '+lightColor"
									@click="more = !more">
									筛选<i class="el-icon-arrow-right"></i>
								</view>
							</view>
						</view>
						<view v-if="tips[0]"
							style=";margin-top: 10px;display: flex;justify-content: space-between;align-items: flex-start;">
							<view
								style="display: flex;justify-content: flex-start;align-items: center;flex-wrap: nowrap;overflow: hidden;height: 40px;">
								<view v-for="(item,index) in tips" :class="cindex==index?'CAD cindex':'CAD'"
									@mouseenter="cindex =index" @mouseleave="cindex = '-1'" @click="sindex =index"
									:style="sindex==index?'background-color: #000;color:#fff;':'color: '+deepColor">
									{{item}}
								</view>
							</view>
							<view
								style="display: flex;justify-content: flex-end;align-items: center;font-size: 14px;margin:10px 10px;">
								<view :style="'color:'+deepColor" @click="more = !more">
									<i class="el-icon-d-arrow-right"></i>
								</view>
							</view>
						</view>
					</view>
					<waterfall :type="tabbarsValue" ref="waterfall" style="width: 100%;padding-top:10px;margin-top: 10px;height: auto;">
					</waterfall>
					<view class="backtop">
						<uv-back-top :customStyle="customStyle" @click="clickTop" :scroll-top="scrollTop"></uv-back-top>
						<el-backtop :visibility-height="500"></el-backtop>
					</view>
				</scroll-view>
			</el-container>
		</view>
		<tabbars :prop-value="'mapping'"></tabbars>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	// 引入
	import tabbars from '@/components/tabbar/tabbar.vue';
	import config from '@/common/config';
	import waterfall from '@/components/waterfall/waterfall.vue';
	import headers from '@/components/header/header.vue';
	import asides from '@/components/aside/aside.vue';
	import {
		like,
	} from '@/common/api.js';
	export default {
		components: {
			// 注册组件
			tabbars,
			headers,
			asides,
			waterfall
		},
		data() {
			return {
				customStyle: {
					fontSize: '24rpx',
					color: '#2979ff',
					boxShadow: '0rpx 3rpx 6rpx rgba(0, 46, 37, 0.5)'
				},

				tabbar: config.tabbar,
				scrollTop: 0,
				deepColor: '#4D4D4D',
				shallowColor: '#808080',
				lightColor: '#ccc',
				dvcurrent: 0,
				shareShow: false,
				shareIndex: null,
				cindex: -1,
				sindex: -1,
				aside: true,
				asideW: 200,

				tips: [],
				clientHeight: null,
				tabbarsValue:''
			}
		},
		watch: {
			shareIndex(newVal, oldVal) {
				this.shareShow = false;
			},
		},
		created() {
			this.tabbarsValue = this.pages();
		},
		mounted() {
			if (!this.isPc) { // 针对桌面平台（Windows和Mac）
				this.aside = false;
				this.asideW = 0;
			}
			this.adjustColumnCount();
			uni.onWindowResize((res) => {
				const that = this; // 保存组件实例的引用
				uni.$uv.debounce(() => that.adjustColumnCount(), 300);
			});
			const res = uni.getSystemInfo({
				success: (res) => {
					this.clientHeight = res.windowHeight - uni.upx2px(80);
				}
			});
		},
		methods: {
			pages() {
				var pages = getCurrentPages() // 获取栈实例
				let currentRoute = pages[pages.length - 1].route; // 获取当前页面路由
				let currentPage = pages[pages.length - 1]['$page']['fullPath'] //当前页面路径(带参数)
				return currentPage.split('/')[2];
			},
			loadMore(e) {
				this.$refs.waterfall.loadMore();
			},
			handleScroll(e) {
				this.scrollTop = e?.detail.scrollTop
				const that = this; // 保存组件实例的引用
				// uni.$uv.debounce(() => that.scrollTop = e?.detail.scrollTop, console.log(e), 300);
			},
			clickTop() {
				var that = this;
				let timess = setInterval(function() {
					let num = parseInt(that.scrollTop / 50);
					if (num < 1) num = 1;
					that.scrollTop = that.scrollTop - num;
					if (that.scrollTop < 1) clearInterval(timess);
					// console.log(that.scrollTop);
				}, 1);
			},
			customevent(e) {
				this.aside = e;
				if (e) {
					this.asideW = 200;
				} else {
					this.asideW = 0;
				}
			},
			adjustColumnCount() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.index-top').boundingClientRect(data => {
					if (data) {
						this.adjustColumn = data;
					}
				}).exec();
			},
			routed(url = '') {
				if (!url) {
					return;
				}
				uni.$uv.route({
					url: url
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	@import 'element-ui/lib/theme-chalk/display.css';

	body {
		overflow: hidden;
		/* 允许垂直滚动 */
		-webkit-overflow-scrolling: touch;
		/* 使用原生滚动，提高性能 */
		position: fixed;
		/* 固定body位置，防止反弹效果 */
		width: 100%;

		/* 确保宽度覆盖全屏 */
		.index-index {
			height: 100%;
			overflow-x: hidden;

			.index-top {
				.CAD {
					min-width: 60px;
					display: flex;
					justify-content: center;
					font-size: 14px;
					margin: 0px 0px 10px 10px;
					padding: 4px 10px;
					border-radius: 5px;
				}

				.cindex {
					background-color: #cccccc;
				}

				.square {
					// background-color: #09bb07;
					height: 0;
					/* 设置高度为0，使其高度由宽度计算得出 */
					padding-bottom: 23%;
					/* 设置padding-bottom为100%，使得高度等于宽度 */
					position: relative;
					/* 为了内部元素的定位 */
				}

				// 轮播图
				@mixin flex($direction: row) {
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					flex-direction: $direction;
				}

				.indicator {
					@include flex(row);
					justify-content: center;

					&__dot {
						cursor: pointer;
						height: 6px;
						width: 6px;
						border-radius: 100px;
						background-color: rgba(255, 255, 255, 0.35);
						margin: 0px 5px;
						margin-top: -2px;
						padding: 2px 10px;
						transition: background-color 0.3s;

						&--active {
							background-color: #ffffff;

						}
					}
				}

				::v-deep .el-carousel__indicator--horizontal .el-carousel__button {
					width: 14px;
					height: 14px;
					background: #bfbfbf;
					border: 2px solid #ffffff;
					border-radius: 50%;
					opacity: 0.5;
				}

				::v-deep .el-carousel__indicator--horizontal.is-active .el-carousel__button {
					width: 14px;
					height: 14px;
					background: #ffffff;
					border-radius: 50%;
					opacity: 1;
				}

				::v-deep .el-carousel__indicators {
					// 指示灯位置
					left: unset;
					transform: unset;
					right: 2%;
				}
			}
		}


		// 瀑布
		.waterfall_flow {
			padding: 0px;
			display: flex;
			justify-content: space-between;
			align-items: self-start;
			flex-wrap: wrap;

			.cont-box {
				$borderRadius: 25rpx;
				float: left;
				width: 100%;

				.list-box {
					width: 100%;
					margin-bottom: 1vh;
					padding: 0px;
					border-radius: $borderRadius;
					overflow: hidden;
				}
			}
		}

		.backtop {
			cursor: pointer;
		}
	}
</style>